<template>
	<view class="containers">
		<image src="https://star.googom.cn/chuangge/me_bj.png" mode="" class="index_bj"></image>
		<view class="container">
			<view class="allHead" :style="{height:topTitBox+'px',backgroundColor:config.bgcolor}">
				<view class="title" :style="{height:nHeight+'px',marginTop:phoneInfo.statusBarHeight+'px'}">
					<image src="https://star.googom.cn/chuangge/saoyisao.png" mode="" class="saoyisao"
						@click="getzwkf()"></image>
				</view>
			</view>
		</view>
		<view class="user_info" v-if="isgosem == true">
			<view class="user_cloum">
				<view class="user_name" @click="getuserInfo()">
					创格Chogler
				</view>
				<view class="user_row" @click="getuserInfo()">
					<view class="user_type">
						明德壹号
					</view>
					<view class="user_type1" style="background-color: #05CF67;">
						置业顾问
					</view>
				</view>
				<view class="user_rows">
					<input type="text" placeholder="添加个人工作签名吧～" class="user_inpouts" v-model="userinfosadd.remark"
						disabled />
				</view>
			</view>
			<image src="@/static/images/avater.png" mode="aspectFill" class="avater" @click="getuserInfo()"></image>
		</view>
		<view class="user_info" v-if="isgosem == false">
			<view class="user_cloum">
				<view class="user_name" @click="getuserInfo()">
					{{userinfosadd.nickName}}
				</view>
				<view class="user_row" @click="getuserInfo()">
					<view class="user_type">
						{{userinfosadd.dept.deptName}}
					</view>
					<view class="user_type1" v-if="shenfen== '置业顾问'" style="background-color: #05CF67;">
						{{shenfen}}
					</view>
					<view class="user_type1" v-if="shenfen== '董事长'" style="background-color: #947964;">
						{{shenfen}}
					</view>
					<view class="user_type1" v-if="shenfen== '营销总监'" style="background-color: #EAAE61;">
						{{shenfen}}
					</view>
					<view class="user_type1" v-if="shenfen== '策划总监'" style="background-color: #DC8FB1;">
						{{shenfen}}
					</view>
					<view class="user_type1" v-if="shenfen== '销售经理'" style="background-color: #A89AD7;">
						{{shenfen}}
					</view>
					<view class="user_type1" v-if="shenfen== '销售主管'" style="background-color: #43D2EB;">
						{{shenfen}}
					</view>
					<view class="user_type1" v-if="shenfen== '科技人员'" style="background-color: #3898FF;">
						{{shenfen}}
					</view>
				</view>
				<view class="user_rows">
					<input type="text" placeholder="添加个人工作签名吧～" class="user_inpouts" v-model="userinfosadd.signature"
						disabled />
				</view>
			</view>
			<image :src="imageUrl+userinfosadd.avatar" mode="aspectFill" class="avater" @click="getuserInfo()"
				v-if="userinfosadd.avatar != null || userinfosadd.avatar != '' "></image>
			<image src="@/static/images/avater.png" mode="aspectFill" class="avater" @click="getuserInfo()" v-else>
			</image>
		</view>
		<view class="user_flesd">
			<view class="user_felxsad" @click="getyeji()">
				<view class="user_number" v-if="isgosem == false">
					{{paimin == null ? '-' : paimin}}
				</view>
				<view class="user_number" v-if="isgosem == true">
					-
				</view>
				<view class="user_number_name">
					业绩排行
				</view>
			</view>
			<view class="liasndad"></view>
			<view class="user_felxsad" @click="getcollects()">
				<view class="user_number">
					32
				</view>
				<view class="user_number_name">
					收藏客户
				</view>
			</view>
		</view>
		<view class="user_xiaoxi">
			<view class="user_xiao_row" @click="getxiaoxi()">
				<view class="user_xiaoxi_name">
					最新消息
				</view>
				<view class="user_xiaoxi_row">
					<view class="yuanquan"></view>
					<view class="tiaoshu">
						99条
					</view>
					<image src="https://star.googom.cn/chuangge/huiyou.png" mode="" class="huiyou"></image>
				</view>
			</view>
			<view class="user_xiasdf" v-for="(item,index) in 2" :key="index" @click="getarticle_detil(item)">
				<image src="https://star.googom.cn/chuangge/xiaoxi.png" mode="" class="xiaoxi"></image>
				<view class="user_xiasdf_name">
					系统消息提醒
				</view>
				<view class="user_xiasdf_time">
					3分钟前
				</view>
			</view>
		</view>
		<view class="xiaoshouada">
			<view class="asadadafa" @click="getzwkf()">
				<image src="https://star.googom.cn/chuangge/daka.png" mode="" class="daka"></image>
				<view class="asadadafa_name">
					打卡
				</view>
			</view>
			<view class="asadadafa" @click="getzwkf()">
				<image src="https://star.googom.cn/chuangge/qigjia.png" mode="" class="daka"></image>
				<view class="asadadafa_name">
					请假
				</view>
			</view>
			<view class="asadadafa" @click="getzwkf()">
				<image src="https://star.googom.cn/chuangge/waichu.png" mode="" class="daka"></image>
				<view class="asadadafa_name">
					外出
				</view>
			</view>
			<view class="asadadafa" @click="getzwkf()">
				<image src="https://star.googom.cn/chuangge/chuchai.png" mode="" class="daka"></image>
				<view class="asadadafa_name">
					出差
				</view>
			</view>
			<view class="asadadafa" @click="getfangai()">
				<image src="https://star.googom.cn/chuangge/fdjsqs.png" mode="" class="daka"></image>
				<view class="asadadafa_name">
					房贷计算
				</view>
			</view>
			<view class="asadadafa" @click="getshgencgeng">
				<image src="https://star.googom.cn/chuangge/shengchengrihu.png" mode="" class="daka"></image>
				<view class="asadadafa_name">
					生成日报
				</view>
			</view>
			<view class="asadadafa" @click="getfeed()">
				<image src="https://star.googom.cn/chuangge/yijianfak.png" mode="" class="daka"></image>
				<view class="asadadafa_name">
					意见反馈
				</view>
			</view>
			<view class="asadadafa" @click="getuserInfo()">
				<image src="https://star.googom.cn/chuangge/wodexinxi.png" mode="" class="daka"></image>
				<view class="asadadafa_name">
					我的信息
				</view>
			</view>
			<view class="asadadafa" @click="getsetup()">
				<image src="https://star.googom.cn/chuangge/shrsd.png" mode="" class="daka"></image>
				<view class="asadadafa_name">
					系统设置
				</view>
			</view>
		</view>
		<!-- 登录弹窗 -->
		<login :show="show" @loadpage="closepage" @closepage="closepage" @payment-success="refreshArray"></login>
	</view>
</template>

<script>
	import login from '@/components/login/login.vue';
	import imageutil from '@/common/config.js'
	export default {
		components: {
			login
		},
		data() {
			return {
				phoneInfo: uni.getSystemInfoSync(),
				jnInfo: uni.getMenuButtonBoundingClientRect(),
				// 整体盒子高度
				topTitBox: 0,
				// 平行胶囊高度
				nHeight: 0,
				show: false,
				isgosem: false,
				shenfen: '',
				userinfosadd: {},
				imageUrl: imageutil.configURLs,
				projectnameid: 0,
				dayinfasd: '',
				paimin: 0
			}
		},
		onLoad() {
			this.topTitBox = this.jnInfo.top - this.phoneInfo.statusBarHeight + this.jnInfo.bottom;
			// (this.jnInfo.top - this.phoneInfo.statusBarHeight) * 2 目的是计算出上下高度 + 胶囊本身高度
			this.nHeight = this.jnInfo.height + (this.jnInfo.top - this.phoneInfo.statusBarHeight) * 2
		},
		onShow() {
			var taht = this
			var token = uni.getStorageSync('token');
			taht.projectnameid = uni.getStorageSync('projectnameid');
			if (token == '' || token == null || token == undefined) {
				taht.isgosem = true
			} else {
				taht.isgosem = false
				//个人信息
				taht.getuserInfos()
				//查询业绩排名
				taht.getrankingUser()
			}
			taht.getFormattedDate()
		},
		methods: {
			//获取当前时间
			getFormattedDate() {
				const now = new Date();
				const year = now.getFullYear();
				const month = now.getMonth() + 1;
				const date = now.getDate();
				const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')}`;
				this.dayinfasd = formattedDate
			},
			//点击生成日报
			async getshgencgeng() {
				var that = this
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let data = await that.$api.getfreport({
					projectId: that.projectnameid,
					status: 1,
					beginDate: that.dayinfasd,
					endDate: that.dayinfasd
				});
				uni.hideLoading();
				if (data.code == 200) {
					const salesReport = `
					 明德壹号
					 ${that.dayinfasd}销售日报
					【今日来电】：${data.data.phoneTodaySum}
					【来电途径】：${data.data.phoneWay}
					【关注产品】：${data.data.phonePro}
					【关注面积】：${data.data.phoneArea}
					【居住区域】：${data.data.phoneDistrict}
					【本月来电】：${data.data.phoneMonthSum}
					【累计来电】：${data.data.phoneSum}
					 
					【今日来访】: ${data.data.visitTodaySum}
					【来访途径】: ${data.data.visitWay}
					【关注产品】: ${data.data.visitPro}
					【关注面积】: ${data.data.visitArea}
					【居住区域】：${data.data.visitDistrict}
					【本月来访】: ${data.data.visitMonthSum}
					【累计来访】: ${data.data.visitSum}
					
					【今日成交】:  
					【认购产品】：
					【认购面积】:
					【认购金额】: 
					
					【本月成交】: 套
					【本月成交金额】:元
					
					【累计成交】: 套
					【成交总额】:元
					
					【抵工程款套数】: 套
					【抵工程款金额】:元
					
					【关系户套数】: 套
					
					【今日回款】:
					【项目共回款】:    元
					
					【项目共认筹】: 组
					【认筹总金额】:   元`;
					uni.setClipboardData({
						data: salesReport,
						success: function() {
							uni.showToast({
								title: '复制成功',
								icon: 'none'
							})
						}
					})
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			//查询业绩排名
			async getrankingUser() {
				var that = this
				let data = await that.$api.getrankingUser({
					projectId: that.projectnameid,
				});
				if (data.code == 200) {
					that.paimin = data.data
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			//个人信息
			async getuserInfos() {
				var that = this
				let data = await that.$api.getprofile();
				if (data.code == 200) {
					that.shenfen = data.postGroup
					that.userinfosadd = data.data
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			refreshArray() {
				var taht = this
				var token = uni.getStorageSync('token');
				if (token == '' || token == null || token == undefined) {
					taht.isgosem = true
				} else {
					taht.isgosem = false
					//个人信息
					taht.getuserInfos()
				}
			},
			//房贷计算器
			getfangai() {
				uni.navigateTo({
					url: '/pages/page/me/house_loan_calculator/house_loan_calculator'
				})
			},
			//业绩排行
			getyeji() {
				let userinfo = uni.getStorageSync('token');
				if (userinfo) {
					uni.navigateTo({
						url: '/pages/page/me/ranking'
					})
				} else {
					setTimeout(() => {
						this.show = true
					}, 500)
				}
			},
			//跳转消息
			getxiaoxi() {
				let userinfo = uni.getStorageSync('token');
				if (userinfo) {
					uni.navigateTo({
						url: '/pages/page/me/message'
					})
				} else {
					setTimeout(() => {
						this.show = true
					}, 500)
				}
			},
			//跳转消息详情
			getarticle_detil(item) {
				let userinfo = uni.getStorageSync('token');
				if (userinfo) {
					uni.navigateTo({
						url: '/pages/page/me/message_detil?id=' + item.id
					})
				} else {
					setTimeout(() => {
						this.show = true
					}, 500)
				}
			},
			//跳转意见反馈
			getfeed() {
				let userinfo = uni.getStorageSync('token');
				if (userinfo) {
					uni.navigateTo({
						url: '/pages/page/me/feedback/feedback'
					})
				} else {
					setTimeout(() => {
						this.show = true
					}, 500)
				}
			},
			//我的信息
			getuserInfo() {
				let userinfo = uni.getStorageSync('token');
				if (userinfo) {
					uni.navigateTo({
						url: '/pages/page/me/userInfo'
					})
				} else {
					setTimeout(() => {
						this.show = true
					}, 500)
				}
			},
			//系统设置
			getsetup() {
				let userinfo = uni.getStorageSync('token');
				if (userinfo) {
					uni.navigateTo({
						url: '/pages/page/me/setup'
					})
				} else {
					setTimeout(() => {
						this.show = true
					}, 500)
				}
			},
			//我的收藏
			getcollects() {
				let userinfo = uni.getStorageSync('token');
				if (userinfo) {
					uni.navigateTo({
						url: '/pages/page/me/collectlist'
					})
				} else {
					setTimeout(() => {
						this.show = true
					}, 500)
				}
			},
			//关闭弹窗
			closepage() {
				this.show = false
			},
			getzwkf() {
				uni.showToast({
					title: '敬请期待',
					icon: "none"
				})
			}
		}
	}
</script>

<style lang="scss">
	.containers {
		width: 100%;
		height: 100vh;
		background-color: #F5F7FB;

		.index_bj {
			width: 750rpx;
			height: 560rpx;
		}

		.container {
			width: 100%;

			.allHead {
				width: 100%;
				height: 668rpx;
				position: fixed;
				top: 0%;
				z-index: 90;

				.title {
					width: 70%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					color: #ffffff;

					.saoyisao {
						width: 48rpx;
						height: 48rpx;
					}

					.shezhi {
						width: 48rpx;
						height: 48rpx;
						margin-left: 40rpx;
					}
				}
			}
		}

		.user_info {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-left: 32rpx;
			padding-right: 54rpx;
			box-sizing: border-box;
			position: relative;
			margin-top: -350rpx;

			.user_cloum {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;

				.user_name {
					font-size: 52rpx;
					font-weight: bold;
					color: #08112C;
				}

				.user_row {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					margin-top: 16rpx;

					.user_type {
						width: 120rpx;
						height: 36rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 6rpx;
						background: #05CF67;
						font-size: 24rpx;
						padding: 2rpx 12rpx;
						color: #FFFFFF;
					}

					.user_type1 {
						width: 120rpx;
						height: 36rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 6rpx;
						background: #43D2EB;
						font-size: 24rpx;
						padding: 2rpx 12rpx;
						color: #FFFFFF;
						margin-left: 16rpx;
					}
				}

				.user_rows {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					margin-top: 26rpx;

					.user_inpouts {
						max-width: 100%;
						font-size: 30rpx;
						color: #7C849C;
					}

					.xiughai {
						width: 40rpx;
						height: 40rpx;
						margin-left: 16rpx;
					}
				}
			}

			.avater {
				width: 192rpx;
				height: 192rpx;
				box-sizing: border-box;
				border: 2rpx solid #FFFFFF;
				border-radius: 50%;
			}
		}

		.user_flesd {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-top: 76rpx;

			.user_felxsad {
				width: 374rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;

				.user_number {
					font-size: 52rpx;
					font-weight: bold;
					color: #08112C;
				}

				.user_number_name {
					font-size: 28rpx;
					color: #485A75;
					margin-top: 12rpx;
				}
			}

			.liasndad {
				width: 2rpx;
				height: 40rpx;
				background: rgba(41, 87, 155, 0.1);
			}
		}

		.user_xiaoxi {
			width: 702rpx;
			height: 236rpx;
			border-radius: 20rpx;
			background: rgba(41, 87, 155, 0.05);
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			margin-top: 60rpx;
			margin-left: 24rpx;

			.user_xiao_row {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				padding-left: 24rpx;
				padding-right: 24rpx;
				box-sizing: border-box;

				.user_xiaoxi_name {
					font-size: 28rpx;
					color: #485A75;
				}

				.user_xiaoxi_row {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					.yuanquan {
						width: 12rpx;
						height: 12rpx;
						background: #FF4D4F;
						border-radius: 50%;
					}

					.tiaoshu {
						font-size: 28rpx;
						color: #485A75;
						margin-left: 4rpx;
					}

					.huiyou {
						width: 40rpx;
						height: 40rpx;
						margin-left: 4rpx;
					}
				}
			}

			.user_xiasdf {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-left: 24rpx;
				margin-top: 32rpx;

				.xiaoxi {
					width: 36rpx;
					height: 36rpx;
				}

				.user_xiasdf_name {
					width: 502rpx;
					font-size: 28rpx;
					color: #08112C;
					margin-left: 8rpx;
				}

				.user_xiasdf_time {
					font-size: 28rpx;
					color: #7C849C;
				}
			}
		}

		.xiaoshouada {
			width: 702rpx;
			border-radius: 20rpx;
			background: rgba(41, 87, 155, 0.05);
			display: flex;
			flex-wrap: wrap;
			margin-top: 24rpx;
			margin-left: 24rpx;
			padding-top: 16rpx;
			box-sizing: border-box;
			padding-bottom: 24rpx;

			.asadadafa {
				width: 175.5rpx;
				height: 128rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.daka {
					width: 38rpx;
					height: 38rpx;
				}

				.asadadafa_name {
					font-size: 24rpx;
					color: #08112C;
					margin-top: 8rpx;
				}
			}
		}
	}
</style>